<!--客服管理 -->
<template>
  <div>
    <div>
      <h1>会话记录</h1>
      当前客服:小医
    </div>
    <br>
    <div id="one">
      历史接待次数
    </div>
    <div id="count">
      {{count}}
    </div>
    <br>
    <span>
      <template>
        <span class="block">
          <span class="demonstration">会话时间</span>
          <el-date-picker v-model="value"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </span>

      </template>
      <span>
        <el-button type="primary"
                   plain
                   @click="find()">筛选</el-button>
      </span>
    </span>

    <el-table :data="tableData"
              stripe
              style="width: 100%">
      <el-table-column prop="customname"
                       label="客服名字"
                       width="180">
      </el-table-column>
      <el-table-column prop="start"
                       label="开始时间"
                       width="380">

      </el-table-column>
      <el-table-column prop="end"
                       label="结束时间"
                       width="380">

      </el-table-column>
      <el-table-column prop="detail"
                       label="详情">
        <template slot-scope="scope">

          <el-button @click="handleEdit(scope.$index,scope.row)"
                     type="text"
                     size="medium"
                     style="background-color: #0040ff; color: #ebebeb">查看</el-button>

          <!-- 编辑时候的弹出层 -->
          <el-dialog title="服务审核"
                     :visible.sync="dialogFormVisible"
                     width="600px"
                     top="20px"
                     :append-to-body="true">
            <div>
              <h3>服务名称 图文问诊</h3>
            </div>
            <div style="margin-bottom: 10px">
              审核
              <el-radio v-model="radio"
                        label="1">审核通过</el-radio>
              <el-radio v-model="radio"
                        label="2">审核不通过</el-radio>
            </div>
            <div style=" margin-bottom: 10px">
              <el-input type="textarea"
                        :rows="4"
                        placeholder="备注"
                        v-model="textarea"
                        style="float: right">
              </el-input>
            </div>

            <div>
              <h3>服务名称 电话问诊</h3>
            </div>
            <br>
            <div style="margin-bottom: 10px">
              审核
              <el-radio v-model="radio"
                        label="1">审核通过</el-radio>
              <el-radio v-model="radio"
                        label="2">审核不通过</el-radio>
            </div>
            <div style=" margin-bottom: 10px">
              <el-input type="textarea"
                        :rows="4"
                        placeholder="备注"
                        v-model="textarea"
                        style="float: right">
              </el-input>
            </div>
            <div>
              <h3>服务名称 视频问诊</h3>
            </div>
            <br>
            <div style="margin-bottom: 10px">
              审核
              <el-radio v-model="radio"
                        label="1">审核通过</el-radio>
              <el-radio v-model="radio"
                        label="2">审核不通过</el-radio>
            </div>
            <div style=" margin-bottom: 10px">
              <el-input type="textarea"
                        :rows="4"
                        placeholder="备注"
                        v-model="textarea"
                        style="float: right">
              </el-input>
            </div>
            <div>
              <h3>服务名称 挂号预约</h3>
            </div>
            <br>
            <div style="margin-bottom: 10px">
              审核
              <el-radio v-model="radio"
                        label="1">审核通过</el-radio>
              <el-radio v-model="radio"
                        label="2">审核不通过</el-radio>
            </div>
            <div style=" margin-bottom: 10px">
              <el-input type="textarea"
                        :rows="4"
                        placeholder="备注"
                        v-model="textarea"
                        style="float: right">
              </el-input>
            </div>
            <div>
              <h3>服务名称 复诊开药</h3>
            </div>
            <br>
            <div style="margin-bottom: 10px">
              审核
              <el-radio v-model="radio"
                        label="1">审核通过</el-radio>
              <el-radio v-model="radio"
                        label="2">审核不通过</el-radio>
            </div>
            <div style=" margin-bottom: 10px">
              <el-input type="textarea"
                        :rows="4"
                        placeholder="备注"
                        v-model="textarea"
                        style="float: right">
              </el-input>
            </div>

            <div slot="footer"
                 class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary"
                         @click="handleSet(scope.$index, scope.row)">确 定</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <br>
    <el-pagination :page-size="20"
                   :pager-count="11"
                   layout="prev, pager, next"
                   :total="500"
                   style="margin-left: 300px">
    </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      conversation: '',
      value: '',
      count: '',
    }
  },
  methods: {
    handleEdit(index, row) {
      alert(1)
      this.dialogFormVisible = true //开启弹出层
      //对弹出层中的表单赋值
      this.form.account = row.name
      this.form.username = row.province
      this.form.id = row.city
    },
    find: function () {
      console.log(this.value[0])
      this.$axios
        .post(
          'http://localhost:9527/conversation/date?start=' +
            this.value[0] +
            '&end=' +
            this.value[1]
        )
        .then((res) => {
          console.log(res)
          this.tableData = res.data.data
        })
    },
    created() {
      this.$axios.get('http://localhost:9527/conversation/find').then((res) => {
        console.log(res)
        this.tableData = res.data.data
      })
      this.$axios
        .get('http://localhost:9527/conversation/count')
        .then((res) => {
          console.log(res)
          this.count = res.data.data
        })
    },
  },
  created() {
    this.created()
  },
}
</script>

<style scoped>
#block {
  text-align: center;
}
#one {
  color: red;
  text-align: center;
  font-size: 30px;
  margin-right: 200px;
}
#count {
  color: red;
  text-align: center;
  font-size: 30px;
  margin-right: 200px;
}
</style>
